<template>
    <div id="header-node">
        <div id="return-homepage">
            <a id="logo" href="" ></a>
            <a id="website-name" href="">FDGreen</a>
        </div>
    </div>
</template>

<script>


export default {
    name: 'HeaderNode',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style  scoped>
#header-node {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 64px;
    backdrop-filter: blur(20px);
    box-shadow: 0px 5px 5px rgb(0, 0, 0);
    z-index: 10;
}


#return-homepage {
    position: relative;
    left: 30px;
    width: 300px;
    height: 64px;
}


#logo {
    position: relative;
    left: 0px;
    display: inline-block;
    width: 64px;
    height: 64px;
    background-image: url("@/assets/shujvku.png");
    background-repeat:no-repeat;
    background-position: center;
}


#website-name {
    position: relative;
    top: -12px;
    left: 0px;
    display: inline-block;
    width: 200px;
    height: 64px;
    color: rgb(255, 255, 255);
    font: 500 48px "Microsoft YaHei" ;
    text-decoration: none;
    user-select:none;
}
</style>